﻿window.onload = () => {
    let a: HTMLDivElement = document.getElementById('a') as HTMLDivElement;
    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") as SVGSVGElement;
    let rect: SVGRectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect") as SVGRectElement;
    //let lineTop: SVGLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line") as SVGLineElement;
    //let lineLeft: SVGLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line") as SVGLineElement;
    //let lineBottom: SVGLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line") as SVGLineElement;
    //let lineRight: SVGLineElement = document.createElementNS("http://www.w3.org/2000/svg", "line") as SVGLineElement;

    //svg.appendChild(lineTop);
    //svg.appendChild(lineLeft);
    //svg.appendChild(lineBottom);
    //svg.appendChild(lineRight);
    //a.appendChild(btn);
    a.appendChild(svg);
    svg.appendChild(rect);

    rect.setAttribute("width", "200");
    rect.setAttribute("height", "200");
    rect.setAttribute("stroke-width", "10");
    rect.setAttribute("fill-opacity", "0.1");
    rect.setAttribute("stroke-opacity", "0.9");
    rect.style.fill = "blue";
    rect.style.stroke = "pink";
    rect.setAttribute("class","loading");

    svg.setAttribute("width", "500");
    svg.setAttribute("height", "500");
    
    //lineTop.setAttribute("x1", "0");
    //lineTop.setAttribute("y1", "0");
    //lineTop.setAttribute("x2", "600");
    //lineTop.setAttribute("y2", "0");

    //lineLeft.setAttribute("x1", "0");
    //lineLeft.setAttribute("y1", "200");
    //lineLeft.setAttribute("x2", "0");
    //lineLeft.setAttribute("y2", "-400");
        
    //lineBottom.setAttribute("x1", "200");
    //lineBottom.setAttribute("y1", "200");
    //lineBottom.setAttribute("x2", "-400");
    //lineBottom.setAttribute("y2", "200");

    //lineRight.setAttribute("x1", "200");
    //lineRight.setAttribute("y1", "0");
    //lineRight.setAttribute("x2", "200");
    //lineRight.setAttribute("y2", "600");

    //btn.onclick = () => {
    //};

    //div: hover svg line {
    //    -webkit - transform: translateX(-400px);
    //    transform: translateX(-400px);
    //}
    //div: hover svg line.top {
    //    -webkit - transform: translateX(-400px);
    //    transform: translateX(-400px);
    //}

    //div: hover svg line.bottom {
    //    -webkit - transform: translateX(400px);
    //    transform: translateX(400px);
    //}

    //div: hover svg line.left {
    //    -webkit - transform: translateY(400px);
    //    transform: translateY(400px);
    //}

    //div: hover svg line.right {
    //    -webkit - transform: translateY(-400px);
    //    transform: translateY(-400px);
    //}
}